<!--
 作者：ex_baiyc
 日期：2016-10-17
 功能：'我'首页  第一部分为介绍部分，点击展示对应的介绍详细；第二部分点击调出相应功能
 参数：
 事件：
-->
<template>
  <div id='home'>
    <toolbar :view-title='viewTitle'>
      <div
        class="leftButton"
        type="button"
        slot="left-button"
        @click="this.$broadcast('goBack')">
      </div>
    </toolbar>
    <ul class='panel'>
      <li class='panel-item' v-link='{path: "/account/accountIntroduce/overview"}'>
        产品概览
      </li>
      <li class='panel-item' v-link='{path: "/account/accountIntroduce/core"}'>
        核心优势
      </li>
      <li class='panel-item' v-link='{path: "/account/accountIntroduce/function"}'>
        功能介绍
      </li>
      <li class='panel-item' v-link='{path: "/account/accountIntroduce/successfulcase"}'>
        成功案例
      </li>
      <li class='panel-item' v-link='{path: "/account/accountIntroduce/moreproduct"}'>
        开普勒数据云更多产品
      </li>
      <li class='panel-item' v-link='{path: "/account/accountIntroduce/explain"}'>
        数据说明
      </li>
      <!--<li class='panel-item' @click='myAccount'>-->
        <!--我的账号-->
      <!--</li>-->
      <li class='panel-item' @click='myConcern'>
        我的关注
      </li>
      <li class='panel-item mt10' @click='shareToMx'>
        分享好友
      </li>
    </ul>
    <confirm :show.sync="show" title="是否退出？" cancel-text="取消" confirm-text="确定" @on-confirm="onAction('确认')"></confirm>
  </div>
</template>

<script>
  //  import cordova from 'cordova'
  import Toolbar from '../common/Toolbar.vue'
  import Confirm from 'vux/dist/components/Confirm'
  export default{
    components: {
      Toolbar,
      Confirm
    },
    data: function () {
      return {
        show: false,
        viewTitle: '开普勒·观星台'
      }
    },
    methods: {
      onAction: function (value) {
        if (value === '确认') {
          window.cordova.exec(function (success) {
          }, function (error) {
            window.alert('Error: ' + error)
          }, 'MideaCommon', 'exit', [])
        } else {
        }
      },
      logout: function () {
        this.$route.router.go('/login')
      },
      shareToMx: function () {
        window.cordova.exec(function (success) {
          window.alert('分享成功!')
        }, function (error) {
          // window.alert('Error: ' + JSON.stringify(error))
          console.error(error)
        }, 'MideaCommon', 'mcShare', [
          {
            'title': '移动观星台',
            'subTitle': '产品概览',
            'action': 'openUrl',
            'url': 'http://testbigdataservice.midea.com/midea-report-mobile/share/m/html/overview.html',
            'imageUrl': 'http://testbigdataservice.midea.com/midea-report-mobile/share/m/img/dataCloud/1/1-3.png',
            'shareRange': '2',
            'actionType': '1'
          }
        ])
      },
      myAccount: function () {
      },
      myConcern: function () {
        this.$route.router.go('/account/myconcern')
      },
      goBack: function () {
        this.show = true
        // window.history.back()
      },
      exitApp: function () {
        var isConfrimed = window.confirm('确认退出？')
        if (isConfrimed === false) {
          return
        }
        window.cordova.exec(function (success) {
        }, function (error) {
          window.alert('Error: ' + error)
        }, 'MideaCommon', 'exit', [])
      }
    },
    ready: function () {
      this.$dispatch('changeLoadingStatus', false)
    }
  }

</script>

<style lang='scss' scoped>
  #home {
    padding-top: 6.7vh;
    height: 90vh;
    background: #EEEEEE;

  .toolbar {
    position: fixed;
    top: 0;
    left: 0;
  }

  .panel {
    margin-bottom: .1rem;

  .panel-item {
    position: relative;
    margin-top: 1px;
    padding-left: .75rem;
    height: 7.6vh;
    line-height: 7.6vh;
    color: #000;

    &:after {
      position: absolute;
      right: .3rem;
      top: 0;
      width: .5rem;
      height: 1rem;
      content: '';
      background: url('') no-repeat center;
      background-size: 30%;

    }
  }

  .panel-item:nth-child(1) {
    background: #fff url('../../../static/img/cpgl@3x.png') no-repeat .2rem center / .45rem .45rem;
  }

  .panel-item:nth-child(2) {
    background: #fff url('../../../static/img/hxys@3x.png') no-repeat .2rem center / .45rem .45rem;
  }

  .panel-item:nth-child(3) {
    background: #fff url('../../../static/img/gnjs@3x.png') no-repeat .2rem center / .45rem .45rem;
  }

  .panel-item:nth-child(4) {
    background: #fff url('../../../static/img/cgal@3x.png') no-repeat .2rem center / .45rem .45rem;
  }

  .panel-item:nth-child(5) {
    background: #fff url('../../../static/img/gdcp@3x.png') no-repeat .2rem center / .45rem .45rem;
  }
  .panel-item:nth-child(8) {
    background: #fff url('../../../static/img/fxhy@3x.png') no-repeat .2rem center / .45rem .45rem;
  }

  .panel-item:nth-child(6) {
    margin-top: .05rem;
    background: #fff url('../../../static/img/sjly@3x.png') no-repeat .2rem center / .45rem .45rem;
  }

  .panel-item:nth-child(7) {
    background: #fff url('../../../static/img/wdgz@3x.png') no-repeat .2rem center / .45rem .45rem;
  }

  }

  .btn-logout {
    display: block;
    margin: 10px auto;
    padding: .1rem 1rem;
    width: 50vw;
    background: #888;
    color: #fff;
    border-radius: .1rem;
    font-size: .4rem;
  }

  }
</style>
